<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>GUI Designer</title>

<script type="text/javascript" src="dojo-release-1.7.1/dojo/dojo.js" djConfig="parseOnLoad:true"></script>


<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript" src="const.js"></script>
<script type="text/javascript" src="GUIDescriptorUtil.js"></script>
<script type="text/javascript" src="dataManager.js"></script>
<script type="text/javascript" src="loadProject.js"></script>
<script type="text/javascript" src="elementMenuManager.js"></script>
<script type="text/javascript" src="elementMenu/headingModifyMenu.js"></script>
<script type="text/javascript" src="elementMenu/roundRectListMenu.js"></script>
<script type="text/javascript" src="elementMenu/roundRectDataListModifyMenu.js"></script>
<script type="text/javascript" src="elementMenu/roundRectCategoryMenu.js"></script>
<script type="text/javascript" src="elementMenu/roundRectMenu.js"></script>
<script type="text/javascript" src="elementMenu/buttonMenu.js"></script>
<script type="text/javascript" src="elementMenu/tabbarMenu.js"></script>
<script type="text/javascript" src="elementMenu/listItemModifyMenu.js"></script>
<script type="text/javascript" src="restService.js"></script>

<link rel="stylesheet" type="text/css"
	href="dojo-release-1.7.1/dijit/themes/tundra/tundra.css">
	
<!-- 	<link rel="stylesheet" type="text/css" -->
<!-- 	href="dojo-release-1.7.1/dijit/themes/claro/claro.css"> -->
	
<!-- 	<link rel="stylesheet" type="text/css" -->
<!-- 	href="dojo-release-1.7.1/dojox/mobile/themes/android/android.css"> -->
	
	<link rel="stylesheet" type="text/css"
	href="dojo-release-1.7.1/dojox/mobile/themes/iphone/iphone.css">
	
	
<style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow:hidden;
  background: #000000;
}

#borderContainer {
  width: 100%;
  height: 100%;
}

</style>    

<script type="text/javascript">
	
	var init = function() {

		populateHTMLElements();
		populateWidgetElements();
		populateMobileElements();
		
		if(isLoadedProject()){
			console.log(GUIDescriptor);
			var oldProject = dojo.fromJson( (dojo.byId("projectLoaded").innerHTML) );
			GUIDescriptor = oldProject.guiDescriptor;
			dataProvider = oldProject.dataProvider;
			console.log(GUIDescriptor);
			
			reloadOldProject(GUIDescriptor);
			
		}else{
			addPage();
		}
		
		
		dojo.subscribe("/viewChanged", function(vC){dojo.byId("pageSelector").value = vC.destinationView; } );
		
	};
	
	var openSaveAsDialog = function(){		
		dijit.byId("dialogSaveAs").show();
	};
	
	var closeSaveAsDialog = function(){		
		dijit.byId('dialogSaveAs').hide();
	};
	
	var saveAsDescriptor = function(){
	
		var data = (dijit.byId("dialogSaveAs").get('value'));
		var projectName = data.projectNameInput;
		
		var json = {guiDescriptor: GUIDescriptor, dataProvider: dataProvider, projectName: projectName}
		
		savaAs("/GUIEngine/rest/ws/saveAs", json );
		
		dijit.byId('dialogSaveAs').hide();
	};
	
	var generateCode = function(){
		
		if(dojo.byId("projectLoaded")){

			var project = dojo.byId("projectLoaded").innerHTML;
			wsPost(wsGenerateCode, dojo.fromJson(project), null, {"Content-Type": "application/json"});
			
		}else{
			alert("Il progetto deve prima essere salvato");
			openSaveAsDialog();
		}
		
	}
	
	//Inizializzazione
	dojo.addOnLoad(init);
	
</script>


</head>
<body id="body" class="tundra">

<% if(request.getParameter("project")!=null){ %>
	
	<div id="projectLoaded" style="visibility: hidden; position: absolute;">
		<%=request.getParameter("project") %>
	</div>	
		
	
<%	} 
%>
	
	<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
	
		<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="border-bottom: 1px solid #454545;">
			<div id="controlBar" style="width: 100%; background-color: #272727; padding-bottom: 5px;">
				<div data-dojo-type="dijit.MenuBar" id="navMenu" style="background: #272727;">
		    		<div data-dojo-type="dijit.PopupMenuBarItem" style="color: #aaaaaa; font-size: 14px;">
			       	 	<span>File</span>
			    	    <div data-dojo-type="dijit.DropDownMenu" id="fileMenu">
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){location.href='index.jsp'}">New</div>
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('Open');}">Open</div>
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){location.href='projectselector.html';}">Load</div>
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('save');}">Save</div>
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){openSaveAsDialog();}">Save as..</div>
				    	    <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){launchDemo();}">Run Demo</div>
				    	     <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){generateCode();}">Generate Code</div>
						</div>
		    	</div>
		    	<div data-dojo-type="dijit.PopupMenuBarItem" style="color: #aaaaaa; font-size: 14px;">
		        	<span>Edit</span>
			        <div data-dojo-type="dijit.DropDownMenu" id="editMenu" style="background: #272727; color: #aaaaaa; font-size: 12px;">
			            <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){addPage();}">Add Page to Workspace</div>
			            <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('edit 2');}">Remove Page from Workspace</div>
			            <div data-dojo-type="dijit.MenuSeparator"></div>
			            <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('edit 2');}">Android Layout</div>
			            <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){alert('edit 2');}">iPhone Layout</div>
			        </div>
				</div>
				<div data-dojo-type="dijit.PopupMenuBarItem" style="color: #aaaaaa; font-size: 14px;">
		        	<span>Data</span>
			        <div data-dojo-type="dijit.DropDownMenu" id="dataMenu" style="background: #272727; color: #aaaaaa; font-size: 12px;">
			            <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){showCreateEntityMenu()}">Create new entity</div>
			       		<div data-dojo-type="dijit.MenuSeparator"></div>
			       		<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){showCreateObjectMenu()}">Create new object</div>
			        </div>
				</div>
				</div>
		</div>
		</div>
		
		<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="border-right: 1px solid #454545; overflow: hidden;">
			<div id="cont" style="width: 250px; background: #272727;">
				<div align="center" style="padding-top: 10px; padding-bottom: 10px; font-size: 13px; color: #aaaaaa;">
					Workspace's page: 
					<select id="pageSelector" onchange="selectPage(this.value)" style="min-width: 40px;">
					</select>
				</div>
			</div>
			
			<div style="width: 250px; height: 100%; background: #272727;">
				<div data-dojo-type="dijit.layout.TabContainer"	style="width: 100%; height: 100%;">
					<div data-dojo-type="dijit.layout.ContentPane"	title="HTML Elements" >
								
					<div id="htmlElementsContainer" style="min-height: 50px; padding-left: 10px; background: #333333; padding-bottom: 10px; padding-top: 10px;">
					</div>
								
					</div>
					
					<div data-dojo-type="dijit.layout.ContentPane" title="Widget">
						<div id="widgetElementsContainer" style="min-height: 50px; padding-left: 10px; background: #333333; padding-bottom: 10px; padding-top: 10px;">
						</div>
					</div>
					<div data-dojo-type="dijit.layout.ContentPane" title="Mobile Element" selected="true">
						<div id="mobileElementsContainer" style="min-height: 50px; padding-left: 10px; background: #333333; padding-bottom: 10px; padding-top: 10px;">
						</div>
					</div>
					
				</div>
			</div>
		</div>

			<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="background: #333333; z-index: 100;">
			<div id="pages" style="margin-top: 10px;">
			</div>
		</div>
		
		<div  data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" >
			<div id="rightMenu" style="width: 250px; min-height: 100%; margin-top: 0px; background: #272727;">
			</div>
		</div>
	</div>
	
	<div id="overlayer" style="width: 100%; height: 100%; background: black; z-index: 0; position: absolute; top: 0; right: 0; opacity: 0; text-align: right;">
		<br>
		<img src="img/close.png" style="text-align:center; border: 1px solid #454545; color: #aaaaaa; background-color: #dddddd; cursor: pointer; margin-right: 20px;" onclick="stopDemo();">
	</div>
	
	<div id="dialogSaveAs" dojoType="dijit.Dialog" title="Save as..." style="width: 400px; height: 200px; background: #272727;">
		<div style="color: #aaaaaa; padding-bottom: 10px;">Project name: </div>
		<input type="text" id="projectNameInput" name="projectNameInput" dojoType="dijit.form.ValidationTextBox" propercase="true">
		<div>
			<button onclick="saveAsDescriptor()">Send</button>
			<button onclick="closeSaveAsDialog()">Cancel</button>
		</div>
	</div>

</body>
</html>